<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-active-color="white">
			<swiper-item>
				<image src="https://huyaimg.msstatic.com/cdnimage/gamebanner/phpp0gylx1633682432.jpg"
					style="width: 750rpx;height: 290rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://huyaimg.msstatic.com/cdnimage/gamebanner/php1FD0771638277727.png"
					style="width: 750rpx;height: 290rpx;"></image>
			</swiper-item>
		</swiper>

		<!-- 列表 -->
		<view class="flex flex-wrap justify-between m-1">
			<view class="list-item" v-for="(item,index) in list" :key="index" @click="openLive(item.id)">
				<image :src="item.cover||'/static/1.gif'" mode="aspectFill" class="rounded image-size"></image>
				<!-- 左上角图标 -->
				<view class="rounded-circle px-2 py-1 flex align-center left-top">
					<text class="iconfont icon-bizhongguanli text-warning mr-1"></text>
					<text class="text-white font-sm">{{item.coin}}</text>
				</view>
				<!-- 右上角文字 -->
				<view class="rounded-circle flex align-center px-2 py-1 right-top">
					<text class="font-sm text-white">人气：</text>
					<text class="text-white font-sm">{{item.look_count}}</text>
				</view>
				<!-- 左下角文字 -->
				<view class="rounded-circle flex align-center px-1 py-1 left-bottom">
					<text class="font text-white">{{item.title}}</text>
				</view>
				<!-- 右下角文字 -->
				<view class="rounded-circle flex align-center px-2 right-bottom">
					<text :class="'bg-'+(item.status===1?'success':'danger')" class="rounded-circle mr-1"
						style="width: 20rpx;height: 20rpx; "></text>
					<text class="text-white font-sm">{{item.status|formatStatus}}</text>
				</view>
			</view>

		</view>
		<view class="flex align-center justify-center py-3">
			<text class="font-sm text-secondary">{{loadText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				loadText: '上拉加载更多'
			}
		},
		onShow() {
			this.getData()
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if (this.loadText !== '上拉加载更多') {}
			this.loadText = '加载中...'
			this.page++
			this.getData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData().then(res => {
				uni.showToast({
					title: "刷新成功！",
					icon: 'none'
				})
				uni.stopPullDownRefresh()
			}).catch(err => {
				uni.stopPullDownRefresh()
			})
		},
		filters: {
			formatStatus(value) {
				let status = {
					0: "未开始",
					1: "直播中",
					2: "暂停",
					3: "已结束",
				}
				return status[value];
			}
		},
		methods: {
			getData() {
				let page = this.page
				return this.$H.get('/live/list/' + page).then(res => {
					this.list = page === 1 ? res : [...this.list, ...res]
					this.loadText = res.length < 10 ? '已经到底啦~' : '上拉加载更多'
				}).catch(err => {
					if (this.page > 1) {
						this.page--
						this.loadText = '上拉加载更多'
					}
				})
			},
			openLive(id) {
				uni.navigateTo({
					url: '../live/live?id=' + id
				})
			}
		}
	}
</script>

<style>
	.list-item {
		box-sizing: border-box;
		position: relative;
	}

	.image-size {
		width: 360rpx;
		height: 360rpx;
	}

	.left-top {
		position: absolute;
		left: 15rpx;
		top: 15rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.right-top {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.left-bottom {
		position: absolute;
		left: 15rpx;
		bottom: 15rpx;
	}

	.right-bottom {
		position: absolute;
		right: 15rpx;
		bottom: 25rpx;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 7rpx;
	}
</style>
